<template>
  <transition name="fade">
    <div class="big-img" v-show="isShow">
      <img :src="imgUrl" alt="" @click="imgClose" />
    </div>
  </transition>
</template>

<script>
export default {
  name: "imgClickBig",
  props: {
    imgUrl: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    imgClose() {
      this.$emit("imgClose");
    },
  },
};
</script>

<style scoped>
.big-img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(1, 1, 1, 1);
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1000;
}
.big-img img {
  width: 98%;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: scale(0);
}
</style>
